import { unstable_HistoryRouter as HistoryRouter, Routes, Route } from "react-router-dom"
import { history } from "./utils"
import { AuthComponent } from "./components/AuthComponent"
import './App.scss'
// 路由懒加载
import { lazy, Suspense } from 'react'
const HomePage = lazy(() => import("@/pages/Home"))
const ArticlePage = lazy(() => import("@/pages/Article"))
const PublishPage = lazy(() => import("@/pages/Publish"))
const Login = lazy(() => import("@/pages/Login"))
const LayoutPage = lazy(() => import("@/pages/Layout"))
function App() {
  return (
    <HistoryRouter history={history}>
      <Suspense
        fallback={
          <div style={{ textAlign: 'center', lineHeight: '100vh' }}>
            loading...
          </div>
        }
      >
        <Routes>
          {/* layout页面需要登录鉴权 */}
          <Route path="/" element={
            <AuthComponent>
              <LayoutPage />
            </AuthComponent>
          }>
            <Route index element={<HomePage />}></Route>
            <Route path="article" element={<ArticlePage />}></Route>
            <Route path="publish" element={<PublishPage />}></Route>
          </Route>
          <Route path="/Login" element={<Login />}></Route>
        </Routes>
      </Suspense>
    </HistoryRouter>
  )
}

export default App
